<template>
    <div class="back">
        <span class="backspan1" :onclick="onClickLeft">&lt;&nbsp;返回</span>
        <span class="backspan2">预约确认</span>
    </div>

    <p class="top">预约确认</p>

    <!-- 预约信息开始 -->
    <div class="middle">
        <div class="yuyue">
            <p class="xinxi1">预约信息</p>
            <p class="xinxi2">医院：千锋人民医院</p>
            <p class="xinxi2">科室：{{ dep1 }}</p>
            <p class="xinxi2">医生：{{ dep2 }}</p>
            <!--  -->
            <p class="xinxi2">时间：{{ clinicaltime }}</p>
        </div>
        <div class="jiuzhenren">
            <p class="xinxi1">就诊人信息</p>
            <p class="xinxi2">姓名：{{ useInfo.name }}</p>
            <p class="xinxi2">联系方式：{{ useInfo.phonenumber}}</p>
        </div>
        <div class="qita">
            <div>
                <p class="xinxi1">其他信息</p>
                <p class="xinxi2">医院电话：020-88888888</p>
                <p class="xinxi2">医院地址：广州市白云区永平街道永泰</p>
                <p class="xinxi2">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（地铁永泰站）
                </p>
            </div>
            <div class="guahaofei">
                <span class="xinxi1">挂号费</span>
                <span class="feiyong">￥20</span>
            </div>

        </div>
        <br><br>
        <!-- 确认预约按钮 -->
        <van-button type="primary" size="large" @click="DialogOut" 
        :style="{position:'fixed', bottom:'20px'}">确认预约</van-button>
        <br />

    </div>
    <!-- 其他信息结束 -->
</template>

<script setup lang="ts">
import $bus from "../../config/eventBus";
import { onUnmounted, ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { Dialog } from 'vant';
import { visInsert } from "../../config/url";
import axios from "../../api/http";
import Moment from 'moment'

// 使用vuex
const store = useStore()
// 存储用户数据
const useInfo = ref({})
const route = useRoute()
const dep2 = ref(decodeURI(route.query.name))

// 点击返回
const onClickLeft = () => history.back();

const dep1 = ref(localStorage.getItem("dep"))
const time = Moment(new Date()).format('YYYY-MM-DD HH:mm:ss')

// 时间
const clinicaltime = ref(store.state.confirmDate)


localStorage.setItem("docname", JSON.stringify(dep2))


// 隐藏底部导航
$bus.emit('tabBarHide', false)
// 返回显示导航
onUnmounted(() => {
    $bus.emit("tabBarHide", true);
})

// 获取用户数据
onMounted(() => {
    useInfo.value = store.state.userInfo
    // console.log(useInfo.value,111);
    route.query.depname && (dep1.value = decodeURI(route.query.depname))
    route.query.clinicaltime && (clinicaltime.value = decodeURI(route.query.clinicaltime))
})
    // console.log(useInfo.value, 111);
    console.log(useInfo.value, 111);


const time2 = Moment(store.state.confirmDate).format('YYYY-MM-DD')
console.log(999, time2);

    // this.$dialog.alert({
    //   message: '弹窗内容',
    // });

// 点击确认预约按钮
const DialogOut = () => {
    console.log(1);

    //     // 发送post请求
    const postVisDep = () => {
        const res = axios.post(visInsert, {
            visid: useInfo.value.visid,
            depid: store.state.id,
            clinicaltime: time2,
            price: 20,
            ordertime: time
        })
        return res
    }
    postVisDep()


    // 弹窗
    const VanDialog = Dialog.Component;
    Dialog.alert({
        message: '预约成功！',
    }).then(() => {
        // on close
    });
}

// 预约科室名称存入vuex  方便个人中心预约内容使用
// store.commit("setkeshi", dep2)

</script>

<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}

.back {
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-color: #1486fa;
    border-bottom: #1486fa solid 5px;
    color: white;

    .backspan1 {
        font-size: 14px;
        float: left;
        padding-left: 20px;
    }

    .backspan2 {
        font-size: 34px;
    }
}

.top {
    width: 100%;
    height: 100px;
    background-color: #1486fa;
    font-size: 40px;
    color: white;
    padding-top: 30px;
    text-indent: 1em;
}

.middle {
    width: 100%;
    height: 85vh;
    padding-top: 20px;
    background-color: #f3f3f3;

    .xinxi1 {
        font-size: 36px;
        font-weight: 600;
        padding-left: 30px;
        border-left: 8px solid #1486fa;
    }

    .xinxi2 {
        font-size: 32px;
        padding-top: 12px;
        text-indent: 1em;
    }


    .yuyue {
        width: 95%;
        height: 300px;
        background-color: white;
        padding-top: 20px;
        margin: 0 auto;
        border-radius: 10px;
    }

    .jiuzhenren {
        height: 200px;
        width: 95%;
        background-color: white;
        padding-top: 20px;
        margin: 0 auto;
        border-radius: 10px;
        margin-top: 15px;

    }

    .qita {
        height: 300px;
        background-color: white;
        padding-top: 20px;
        margin: 0 auto;
        width: 95%;
        border-radius: 10px;
        margin-top: 15px;


        .guahaofei {
            height: 90px;
            background-color: white;
            line-height: 90px;

            border-top: 4px solid #f3f3f3;

            .feiyong {
                float: right;
                color: red;
                font-size: 30px;
                margin-right: 30px;
            }

        }
    }
}
</style>